<template>
	<view class="home position-relative">
		<view class="topbg"></view>
		<view class="position-relative">
			<view class="flex padding-lr-60 padding-top-25">
				<image :src="user.avatar" mode="" class="headimg"></image>
				<view class="flex-one margin-left-30">
					<view class="text-32 text-ff margin-top-10">{{user.nickname}}</view>
					<view class="text-28 text-ff margin-top-15">妖币：{{user.score}}</view>
				</view>
				<image src="/static/board/zyjff.png" mode="" class="zyjimg"></image>
			</view>
			<view class="flex align-center justify-around margin-top-35 padding-lr-60">
				<view class="btnleft" @click="go('/pages/game/signdetails')">妖币明细</view>
				<view class="btnright" @click="go('/pages/game/demonstore')">妖币商店</view>
			</view>
			<view class="bg-ff radius-40 bg-shadow padding-30 margin-lr-30 margin-top-35">
				<view class="text-32">每日签到得妖币 享福利</view>
				<!-- 1 已签到 0未签到 -->
				<view class="flex justify-between margin-top-30">
					<view :class="item.status!=0?'signbtn_active':'signbtn'"
						class="flex align-center flex-direction justify-center" v-for="(item,index) in list"
						:key="index">
						<image src="/static/board/money.png" mode="" class="moneyimg" v-if="item.status==0"></image>
						<image src="/static/board/moneyff.png" mode="" class="moneyimg" v-if="item.status!=0"></image>
						<view class="margin-top-10 text-24" :class="item.status!=0?'text-ff':'text-66'">
							+{{item.points_awarded}}</view>
					</view>
				</view>
				<view class="flex align-center margin-top-15 position-relative" style="left: 30rpx;">
					<view class="flex align-center flex-one" v-for="(item,index) in list" :key="index">
						<!-- <view :class="index==0?'signline_active':'signline'"></view> -->
						<view :class="item.status!=0?'signline_active':'signline'"></view>
						<view class="flex-one " :class="index==-1?'border-bottom-1a':'border-bottom-f3'"
							v-if="index!=6">
						</view>
					</view>
				</view>
				<view class="flex align-center justify-center margin-top-10">
					<view class="flex-one align-center text-24 text-66" v-for="(item,index) in list" :key="index">
						{{item.date}}
					</view>
				</view>
				<view class="qdbtn" @click="sign" v-if="sign_in==0">
					立即签到
				</view>
				<view class="qdbtnno" @click="zhendong" v-if="sign_in==1">
					已签到
				</view>
			</view>
			<view class="flex margin-top-40 flex-direction margin-lr-30">
				<view class="flex">
					<view class="text-32 text-bold position-relative">
						活动专区
						<image src="/static/board/xing.png" mode="" class="xingimg"></image>
					</view>
				</view>
				<image src="/static/board/line.png" mode="" class="lineimg"></image>
			</view>
			<view class="flex justify-between flex-wrap margin-top-30 margin-lr-30">
				<image :src="item.image_url" mode="aspectFill" class="activeimg margin-bottom-30"
					v-for="(item,index) in activitie_list" :key="index"
					@click="go('/pages/board/activdetail?id='+item.id)">
				</image>
			</view>
		</view>
		<!-- 浮层 -->
		<view class="layer" v-if="show_sign">
			<view class="layerbg">
				<image src="/static/board/dui.png" mode="" class="duiimg"></image>
				<view class="text-36 text-bold margin-top-65 text-center">今日签到成功，获得指定妖币</view>
				<!-- <view class="text-36 text-bold margin-top-65 text-center">今日签到成功</view> -->
				<!-- <view class="text-36 text-bold margin-top-5 text-center">每日首次签到获得妖币</view> -->
				<view @click="show_sign = false" class="border-top-ed padding-tb-25 margin-top-30 text-center">
					返回
				</view>
			</view>
			<image @click="show_sign = false" src="/static/board/close.png" mode="" class="closeimg"></image>
		</view>
		<view class="layer" v-if="showover">
			<view class="layerbg">
				<image src="/static/board/dui.png" mode="" class="duiimg"></image>
				<view class="text-36 text-bold margin-top-65 text-center">今日已签到</view>
				<view class="text-36 text-bold margin-top-5 text-center">每日首次签到获得妖币</view>
				<view @click="showover = false" class="border-top-ed padding-tb-25 margin-top-30 text-center">
					返回
				</view>
			</view>
			<image @click="showover = false" src="/static/board/close.png" mode="" class="closeimg"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show_sign: false,
				list: [],
				last_page: 0,
				current_page: 1,
				user: {},
				activitie_list: [],
				showover: false,
				sign_in:""
			}
		},
		onShow() {
			this.init()
			this.getqian()
		},
		onReachBottom() {
			if (this.activitie_list != undefined && this.activitie_list.length > 0) {
				this.current_page++
				if (this.last_page < this.current_page) {
					return
				}
				this.init()
			}
		},
		methods: {
			init() {
				this.rq.getData('Wechat/user_info', {}).then(res => {
					if (res.code == 1) {
						this.user = res.data
					}
				})
				this.rq.getData('sign/getThisWeekSignInStatus', {}).then(res => {
					if (res.code == 1) {
						this.list = res.data
					}
				})
				var that = this
				that.rq.getData('activitie/activitie_list', {
					type: 0,
					page: this.current_page,
					shop_id: uni.getStorageSync('store_id'),
				}).then(res => {
					if (res.code == 1) {
						let list = res.data.data
						this.last_page = res.data.last_page;
						this.current_page = res.data.current_page;
						if (this.current_page == 1) {
							this.activitie_list = list
						} else {
							if (activitie_list.length > 0) {
								this.activitie_list = this.activitie_list.concat(list)
							}
						}
					}
				})
			},
			sign() {
				this.rq.getData('sign/signIn', {}).then(res => {
					if (res.code == 1) {
						if (res.sign == 1) {
							this.showover = true
						} else {
							this.show_sign = true
						}
						this.init()
						this.getqian()
					}
				})
			},
			getqian(){
				this.rq.getData('sign/sign_status').then(res=>{
					if(res.code==1){
						this.sign_in = res.data.sign_in
					}
				})
			},
			// zhendong(){
			// 	wx.vibrateShort({
			// 		type:'heavy',
			// 		success: function () {
			// 			console.log('success');
			// 		}
			// 	});
			// }
		}
	}
</script>

<style>
	.home {
		width: 100%;
		min-height: 100vh;
		background: #fff;
	}

	.topbg {
		width: 100%;
		height: 378rpx;
		background: #000;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}

	.headimg {
		width: 106rpx;
		height: 106rpx;
		border-radius: 50%;
	}

	.zyjimg {
		width: 178rpx;
		height: 74rpx;
		margin-right: 20rpx;
	}

	.btnleft {
		width: 232rpx;
		height: 72rpx;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		border: 2rpx solid #FFFFFF;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 72rpx;
		text-align: center;
	}

	.btnright {
		width: 232rpx;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #111111;
		line-height: 72rpx;
		text-align: center;
	}

	.signbtn {
		width: 74rpx;
		height: 108rpx;
		background: #F3F3F3;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.signbtn_active {
		width: 74rpx;
		height: 108rpx;
		background: #101010;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.moneyimg {
		width: 40rpx;
		height: 40rpx;
	}

	.signline {
		width: 16rpx;
		height: 16rpx;
		background: #F3F3F3;
		border-radius: 50%;
	}

	.signline_active {
		width: 16rpx;
		height: 16rpx;
		background: #101010;
		border-radius: 50%;
	}

	.border-bottom-f3 {
		border-bottom: 1rpx solid #F3F3F3;
	}

	.border-bottom-1a {
		border-bottom: 1rpx solid #1a1a1a;
	}

	.qdbtn {
		width: 506rpx;
		height: 88rpx;
		background: #101010;
		box-shadow: 0rpx 16rpx 80rpx 0rpx rgba(66, 66, 67, 0.25);
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		margin: 35rpx auto 0;
	}
	.qdbtnno{
		width: 506rpx;
		height: 88rpx;
		background: #999999;
		box-shadow: 0rpx 16rpx 80rpx 0rpx rgba(66, 66, 67, 0.25);
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		margin: 35rpx auto 0;
	}

	.xingimg {
		width: 20rpx;
		height: 20rpx;
		position: absolute;
		top: -5rpx;
		right: -25rpx;
	}

	.lineimg {
		width: 76rpx;
		height: 10rpx;
	}

	.activeimg {
		width: 330rpx;
		height: 330rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.layer {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.layerbg {
		width: 540rpx;
		/* height: 418rpx; */
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 400rpx;
		padding-top: 35rpx;
	}

	.duiimg {
		width: 168rpx;
		height: 136rpx;
		display: block;
		margin: 0 auto;
	}

	.closeimg {
		width: 58rpx;
		height: 58rpx;
		margin-top: 40rpx;
	}
</style>